<template>
  <div class="card">
    <div class="img">
      <el-image src="https://publicqn.saikr.com/files/default/2020/12-28/210142644193025211.jpg"></el-image>
    </div>
    <div class="introduce">
      <div class="content">
        <div class="title">【建模必备】MATLAB从入门到算法实践</div>
        <div class="info">
          <div class="left-study">
            <p>96人已学习</p>
          </div>
          <div class="right-price">
            <p>¥599</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.card {
  border: 1px solid #eaeaea;
  border-radius: 10px;
  transition: box-shadow 0.3s ease-in-out;
  cursor: pointer;
  &:hover {
    box-shadow: 0px 10px 30px 0px #dcdcdc;
  }
  .introduce {
    .content {
      padding: 10px 20px;
      .title {
        font-size: 14px;
        color: #666;
      }
      .info {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left-study {
          font-size: 12px;
          color: #666;
        }
        .right-price {
          color: #eb3b1e;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
